<template>
	<view class="qrcode-container">
		<view class="qrcode-box">
			<view class="pay-type-switch">
				<view
					class="pay-type-option"
					:class="{ active: payType === 'weixin' }"
					@click="switchPayType('weixin')"
				>
					微信支付
				</view>
				<view
					class="pay-type-option"
					:class="{ active: payType === 'alipay' }"
					@click="switchPayType('alipay')"
				>
					支付宝支付
				</view>
			</view>
			<image :src="qrCode" mode="widthFix" class="qrcode-image"></image>
			<button @click="getQrCode" v-if="!isPay">刷新二维码</button>
			<view class="title" style="color: red;">{{ title }}</view>
		</view>
	</view>
</template>

<script>
	import { getMoneyQrCode, queryWechatPayResult, queryAliPayResult } from '@/api/index.js'
	export default {
		data() {
			return {
				orderNo: '',
				qrCode: '',
				title: '订单未支付',
				timeInter: null,
				isPay: false,
				payType: ''
			}
		},
		onLoad(options) {
			this.orderNo = options.orderNo
			this.payType = options.payType || 'weixin'
			this.getQrCode()
			this.queryOrder()
		},
		onUnload() {
			if (this.timeInter) {
				clearInterval(this.timeInter)
			}
		},	
	 
		methods: {
			switchPayType(type) {
				if (this.payType !== type) {
					this.payType = type;
					this.isPay = false;
					this.title = '订单未支付';
					if (this.timeInter) {
						clearInterval(this.timeInter);
					}
					this.getQrCode();
					this.queryOrderResult(); // 立即查一次
					this.queryOrder(); // 重新启动定时查询
				}
			},
			queryOrder(time = 5000) {
				if (this.timeInter) {
					clearInterval(this.timeInter)
				}
				this.timeInter = setInterval(() => {
					this.queryOrderResult()
				}, time)
			},
			getQrCode() {
				getMoneyQrCode({
					orderNo: this.orderNo,
					payChannel: 'qrCode',
					payType: this.payType
				}).then(res => {
					this.qrCode = res.data.alipayRequest
				}).catch(err => {
					this.title = err
					if(this.title== '订单已支付'){
						this.qrCode = ''
					}
					clearInterval(this.timeInter)
				})
			},
			queryOrderResult() {
				// 
				if(this.payType == 'weixin'){
					queryWechatPayResult(this.orderNo).then(res => {
						// console.log(res)
						// if(res.data)
						this.isPay = res.data
						if(this.isPay){
							this.title = '订单已支付'
							this.qrCode = ''
						}
					})
				}else{
					queryAliPayResult(this.orderNo).then(res => {
						// console.log(res)
						this.isPay = res.data
						if(this.isPay){
							this.title = '订单已支付'
							this.qrCode = ''
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.qrcode-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4vw;
	
	.qrcode-box {
		background-color: #fff;
		border-radius: 2vw;
		padding: 6vw 5vw 5vw 5vw;
		box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 60vw;
		max-width: 90vw;
		width: 100%;
		box-sizing: border-box;
		
		.pay-type-switch {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 4vw;
			gap: 4vw;
			width: 100%;
			
			.pay-type-option {
				display: flex;
				align-items: center;
				padding: 1vw 3vw;
				border-radius: 2vw;
				background: #f0f4f8;
				justify-content: center;
				color: #333;
				font-size: 1.1rem;
				font-weight: 500;
				cursor: pointer;
				transition: all 0.2s;
				border: 2px solid transparent;
				.pay-icon {
					width: 24px;
					height: 24px;
					margin-right: 1vw;
				}
			}
			.pay-type-option.active {
				background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
				color: #fff;
				border: 2px solid #4facfe;
				box-shadow: 0 2px 8px rgba(79,172,254,0.10);
			}
		}
		
		.qrcode-image {
			width: 60vw;
			max-width: 400px;
			min-width: 180px;
			height: auto;
			margin-bottom: 4vw;
			border-radius: 1vw;
			box-shadow: 0 2px 12px rgba(0,0,0,0.06);
			background: #fafafa;
			object-fit: contain;
		}
		
		button {
			width: 60vw;
			max-width: 400px;
			min-width: 180px;
			line-height: 44px;
			font-size: 1.1rem;
			border-radius: 22px;
			background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
			color: #fff;
			margin-bottom: 2vw;
			border: none;
			box-shadow: 0 2px 8px rgba(79,172,254,0.15);
			transition: background 0.3s;
		}
		button:active {
			background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
		}
		
		.title {
			font-size: 1.2rem;
			color: #e74c3c;
			text-align: center;
			margin-top: 2vw;
			font-weight: 600;
			letter-spacing: 1px;
		}
	}
}
</style>
